<template>
    <div class="main">
        <el-timeline v-if="collaboratorList.length >0" style="max-width: 600px">
            <el-timeline-item v-for="(collaborator, index) in collaboratorList" :key="collaborator.userId"
                :timestamp="collaborator.createTime" placement="top">
                <el-card>
                    <div>
                        <strong>邀请人：</strong>{{ collaborator.username }}
                    </div>
                    <div>
                        <strong>文章标题：</strong>{{ collaborator.articleTitle }}
                    </div>
                    <div>
                        <strong>邀请信息：</strong>{{ collaborator.message }}
                    </div>
                    <div v-if="collaborator.status == 0" style="display: flex;flex-direction: row;">
                        <el-button @click="allow(collaborator.id,collaborator.articleId)" style="margin-left: 200px;"
                            type="primary">接收</el-button>
                        <el-button @click="notAllow(collaborator.id)" style="margin-left: 20px;" type="danger">拒绝</el-button>
                    </div>
                </el-card>
            </el-timeline-item>
        </el-timeline>
        <el-empty v-else description="暂时没有接到协作邀请" />
    </div>
</template>

<script setup>
import { selectCollaborator, allowOrNotAllow } from '../../api/article';
import { onMounted, reactive } from 'vue';
import { getuserMessage } from '../../api/user';
import { getDetails } from '../../api/article';
import { useArticleStore } from '../../stores/article';
import router from '../../router';


const collaboratorList = reactive([]);
const articleStore = useArticleStore()
// 在组件挂载时调用 getCollaborator 函数
onMounted(() => {
    getCollaborator();
});

// 获取协作人信息和文章详情
async function getCollaborator() {
    const params = new URLSearchParams();
    params.append('collaboratorId', localStorage.getItem('userId'));
    await selectCollaborator(params).then(async (res) => {
        if (res.code === 200) {
            const collaboratorData = res.data.list;
            for (const collaborator of collaboratorData) {
                // 获取用户信息
                const userInfo = await getuserMessage(new URLSearchParams({ id: collaborator.userId }));
                // 获取文章信息
                const articleInfo = await getDetails(new URLSearchParams({ id: collaborator.articleId }));

                // 将用户名和文章标题存入列表
                collaborator.username = userInfo.data.username;
                collaborator.articleTitle = articleInfo.data.title;
            }
            // 更新 collaboratorList
            collaboratorList.splice(0, collaboratorList.length, ...collaboratorData);
        }
    });
}
async function allow(id,articleid) {
    const params = new URLSearchParams
    params.append("id", id)
    params.append("status", 1)
    await allowOrNotAllow(params).then(res => {
        console.log(res)
        articleStore.articleId = articleid
        getCollaborator()
        router.push('/together')
    })
}
async function notAllow(id) {
    const params = new URLSearchParams
    params.append("id", id)
    params.append("status", 2)
    await allowOrNotAllow(params).then(res => {
        console.log(res)
        getCollaborator()
    })
}
</script>

<style scoped>
/* 样式可以根据需求进行调整 */
.main{
    overflow: auto;
}
</style>